<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>三方用户绑定</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}"/>
    <link rel="stylesheet" href="../static/sdk/antd.css" th:href="@{/sdk/antd.css}"/>
    <link rel="stylesheet" href="../static/sdk/helper.css" th:href="@{/sdk/helper.css}"/>
    <link rel="stylesheet" href="../static/sdk/iconfont.css" th:href="@{/sdk/iconfont.css}"/>
    <script src="../static/sdk/sdk.js" th:src="@{/sdk/sdk.js}"></script>
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script type="text/javascript">
    // dev：纯页面开发，prod：生产环境
    const env = "prod";
    const host = (env === "dev") ? "http://localhost:8001" : "[[${app.domain}]]";

    (function () {
        let apiJson = {
            url: host + "/login",
            method: "post",
            adaptor: function (payload, response) {
                if (payload.status === 0) {
                    localStorage.setItem("token", payload.data);
                    sessionStorage.setItem("token", payload.data);
                    location.href = host + "/index";
                }
                return payload;
            }
        };
        let appJson = {
            "type": "page",
            "body": [
                {
                    "type": "flex",
                    "justify": "center",
                    "direction": "column",
                    "className": "h-4/5",
                    "alignItems": "center",
                    "items": [
                        {
                            "type": "flex",
                            "direction": "column",
                            "items": [
                                {
                                    "type": "avatar",
                                    "fit": "none",
                                    "src": host + "/img/logo.png",
                                    "style": {
                                        "width": 160,
                                        "height": 160
                                    }
                                },
                                {
                                    "type": "tpl",
                                    "className": "h-5"
                                },
                                {
                                    "type": "tpl",
                                    "tpl": "三方绑定",
                                    "className": "text-2xl text-success"
                                },
                                {
                                    "type": "tpl",
                                    "className": "h-5"
                                }
                            ]
                        },
                        {
                            "type": "tabs",
                            "tabs": [
                                {
                                    "className": "p-none",
                                    "body": [
                                        {
                                            "type": "form",
                                            "title": "",
                                            "api": apiJson,
                                            "panelClassName": "m-none",
                                            "mode": "horizontal",
                                            "horizontal": {
                                                "left": 3,
                                                "right": 9
                                            },
                                            "body": [
                                                {
                                                    "type": "flex",
                                                    "justify": "space-evenly",
                                                    "items": [
                                                        {
                                                            "type": "avatar",
                                                            "src": host + "/img/third-[[${source}]].png",
                                                            "style": {
                                                                "width": 60,
                                                                "height": 60
                                                            }
                                                        },
                                                        {
                                                            "type": "tpl",
                                                            "tpl": "=>",
                                                            "className": "w-3 text-black text-lg"
                                                        },
                                                        {
                                                            "type": "avatar",
                                                            "src": host + "/img/logo60x60.png",
                                                            "style": {
                                                                "width": 60,
                                                                "height": 60
                                                            }
                                                        }
                                                    ]
                                                },
                                                {
                                                    "type": "divider"
                                                },
                                                {
                                                    "type": "hidden",
                                                    "name": "type",
                                                    "label": "登录类型",
                                                    "value": "tps"
                                                },
                                                {
                                                    "type": "hidden",
                                                    "name": "uuid",
                                                    "label": "三方 ID",
                                                    "value": "[[${userThirdModel != null ? userThirdModel.uuid : ''}]]"
                                                },
                                                {
                                                    "type": "static-text",
                                                    "name": "username",
                                                    "label": "用户: ",
                                                    "value": "[[${userThirdModel != null ? userThirdModel.username : ''}]]",
                                                    "size": "md"
                                                }
                                            ],
                                            "actions": [
                                                {
                                                    "type": "button",
                                                    "label": "返回",
                                                    "actionType": "link",
                                                    "link": host + "/login",
                                                },
                                                {
                                                    "type": "submit",
                                                    "level": "primary",
                                                    "label": "绑定并登录"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ],
                            "tabsMode": "tiled",
                            "mountOnEnter": true,
                            "className": "w-xxl",
                            "linksClassName": "font-bold text-success"
                        }
                    ]
                }
            ],
            "style": {
                "backgroundSize": "",
                "backgroundImage": host + "/img/bg.png"
            }
        };
        amisRequire('amis/embed').embed('#root', appJson, {}, {theme: 'antd'});
    })();
</script>
</body>
</html>